<template>
	<div class="member-edit-level">
		<el-dialog title="修改会员等级" v-model="state.isShowDialog" width="769px" destroy-on-close>
			<el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="150px">
				<el-form-item label="父级" style="width: 100%">
					<el-select v-model="state.ruleForm.pid" style="width: 100%">
						<el-option :label="item.username" :value="item.id" v-for="item in memberList" :key="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="会员级别">
					<el-input v-model="state.ruleForm.levelName" placeholder="请输入会员级别" clearable></el-input>
				</el-form-item>
				<el-form-item label="升级条件">
					<el-select v-model="state.ruleForm.upgrade" @change="onChangeUpgrade" style="width: 100%">
						<el-option label="购买入会商品" :value="1" />
						<el-option label="消费佣金比列" :value="2" />
						<el-option label="消费金额" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="state.isGoods" label="入会商品" style="width: 100%">
					<el-select v-model="state.ruleForm.shopId" placeholder="请选择商品名称" style="width: 100%">
						<el-option v-for="item in productList" :key="item.id" :label="item.productName" :value="item.productId" />
					</el-select>
				</el-form-item>
				<el-form-item label="达标值">
					<el-input v-model="state.ruleForm.succ" placeholder="请输入达标值"></el-input>
				</el-form-item>
				<el-form-item label="消费佣金比列">
					<el-input v-model="state.ruleForm.commission" placeholder="请输入消费佣金比列"></el-input>
				</el-form-item>
				<el-form-item label="订单佣金比列($/单)">
					<el-input v-model="state.ruleForm.orderCommiss" placeholder="请输入订单佣金比列"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" size="default">修 改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemEditRole">
import { ElMessage } from 'element-plus';
import { useMemberLevelApi } from '/@/api/member';
import { useProductApi } from '/@/api/product';
import { useRules } from '/@/utils/formRules';

const { memberLevelRules } = useRules();
const rules = reactive(memberLevelRules());
const { getProdSkuList } = useProductApi();
const { updateMemberLevel } = useMemberLevelApi();

defineProps({
	memberList: {
		type: Array,
		default: () => [],
	},
	productList: {
		type: Array,
		default: () => [],
	},
});
const emit = defineEmits(['onSaveSuccess']);

const ruleFormRef = ref();
const page = ref({
	pageSize: 99999,
	current: 1,
});

const state = reactive({
	isShowDialog: false,
	isGoods: false,
	ruleForm: {
		pid: '',
		levelName: '',
		upgrade: '',
		shopId: '',
		succ: '',
		commission: '',
		orderCommiss: '',
	},
	shopList: [],
	loading: false,
	menuData: [],
	menuProps: {
		children: 'children',
		label: 'label',
	},
});

const onChangeUpgrade = (val) => {
	console.log(val);
	if (val === 1) {
		state.isGoods = true;
	} else {
		state.isGoods = false;
	}
};

// 打开弹窗
const openDialog = (row) => {
	if (row.upgrade === 1) {
		state.isGoods = true;
	}
	console.log(row);
	state.ruleForm = row;
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 修改
const onSubmit = async (formEl) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			let res = await updateMemberLevel(state.ruleForm);
			if (res.code === 200) {
				emit('onSaveSuccess');
				ElMessage({
					type: 'success',
					message: '保存成功！',
				});
				closeDialog();
			}
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
